import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as action from '../action'
import BS from 'better-scroll'
 class Shangxiala extends Component {
  state = {
      isloding:false
  }
  componentDidMount(){
    this.props.getPushList()
    this.BS = new BS('.shangwrap', {
        pullUpLoad: true, // 开启上拉加载
        pullDownRefresh: true, // 开启下拉刷新
    })
    this.BS.on('pullingUp', () => {
       
        this.props.getPushList('up')
        setTimeout(() => {
          this.BS.refresh()
          this.BS.finishPullUp()
        }, 2000);
        
      })
  
      this.BS.on('pullingDown', () => {
        this.setState({
            isloding:true
        })
        this.props.getPushList('down')
        setTimeout(() => {
          this.BS.refresh()
          this.BS.finishPullDown();
          this.setState({
            isloding:false
        })
        }, 2000)
      })
  }
  componentWillUnmount(){ // 组件销毁时
    this.BS.destroy()
  }
  render() {
    return (
      <div className='shangwrap'>
            <div className='inner'>
                {
                    this.state.isloding?<div>...laoding</div>:""
                }
                {
                    this.props.pushData&& this.props.pushData.length?this.props.pushData.map((item,index)=>{
                        return <div key={index}>
                            <span>{item.title}</span>
                            <img alt='' src={item.img}></img>
                        </div>
                    }):""
                }
            </div>
      </div>
    )
  }
}
let mapStateToprops = (state)=>{
    console.log(state)
      return {
          ...state.antdReducer
      }
}
let mapDispatchToprops =(disptach)=>bindActionCreators(action,disptach)
export default connect(mapStateToprops,mapDispatchToprops)(Shangxiala)
